<template>
    <div class="index">
        <el-container>
            <el-aside width="220px">
                <el-menu
                    router
                    background-color="#324157"
                    text-color="#fff"
                    active-text-color="green"
                    unique-opened
                    :default-openeds="['1', '3']"
                    style="height: 100vh"
                >
                    <el-submenu index="1">
                        <template #title><i class="el-icon-message"></i>导航一</template>
                        <el-menu-item-group>
                            <el-menu-item index="/test" style="margin-left: 15px;margin-top: -6px;">选项1</el-menu-item>
                            <el-menu-item index="/text" style="margin-left: 15px;margin-top: -6px;">选项2</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                </el-menu>
            </el-aside>

            <el-container>
                <el-header style="text-align: right; font-size: 12px">
                    <span>王小虎</span>
                </el-header>
                <el-main>
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
    export default {
        name:'index',
        data() {

        }
    };
</script>
<style>
    .el-header {
        background-color: #B3C0D1;
        color: #333;
        line-height: 60px;
    }
</style>
